let data = [
  {
    id: 1,
    code: 1,
    productName: "品如的衣柜",
    timer: new Date().toLocaleTimeString(),
  },
  {
    id: 2,
    code: 2,
    productName: "蔡徐坤的篮球",
    timer: new Date().toLocaleTimeString(),
  },
  {
    id: 3,
    code: 3,
    productName: "关羽的马",
    timer: new Date().toLocaleTimeString(),
  },
];

// 处理数据
let newData = [];
for (i = 0; i < data.length; i++) {
  let obj = {};

  for (let k in data[i]) {
    obj.id = data[i].id;
    obj.productName = data[i].productName;
    obj.timer = data[i].timer;
  }
  newData.push(obj);
}

class tools {
  $ = (el) => document.querySelector(el);
  c_ = (el) => document.createElement(el);
}

class table extends tools {
  // 获取表格的基础信息
  constructor(data) {
    super();
    this.tbody = this.$("#tbody");
    this.arr = data;
    this.createBody();
  }

  // 渲染表格和基本按键功能
  createBody() {
    this.tbody.innerHTML = "";
    for (let i = 0; i < this.arr.length; i++) {
      let tr = this.c_("tr");
      this.tbody.appendChild(tr);

      for (let k in this.arr[i]) {
        let td = this.c_("td");
        td.innerHTML = this.arr[i][k];
        td.style.textAlign = "center";
        tr.appendChild(td);
      }

      let lastTd = this.c_("td");
      let btn = this.c_("button");
      btn.innerHTML = "删除";
      lastTd.appendChild(btn);
      lastTd.style.textAlign = "center";
      tr.appendChild(lastTd);

      btn.onclick = () => {
        this.arr.splice(i, 1);
        this.createBody();
      };
    }
    this.deletAll();
  }

  // 当数据全部删除之后显示'没有更多数据了
  deletAll() {
    if (this.tbody.innerHTML == "") {
      let tr = this.c_("tr");
      this.tbody.appendChild(tr);
      tr.innerHTML = "没有更多数据了";
    }
  }
}

// 增加数据功能
class addTable extends tools {
  constructor() {
    super();
    this.tableNum = this.$("#tableNum");
    this.tableName = this.$("#tableName");
    this.add = this.$("#add");
    this.add.disabled = true;
    this.btnEven();
    this.tableNameTest();
  }

  // 按钮事件
  btnEven() {
    this.add.onclick = this.addBtn;
  }

  // 按键添加功能
  addBtn = () => {
    let obj = {};
    obj.id = this.tableNum.value;
    obj.productName = this.tableName.value;
    obj.timer = new Date().toLocaleTimeString();
    newData.push(obj);
    t.createBody();
    this.tableNum.value = "";
    this.tableName.value = "";
  };

  // 输入框校验 和回车提交功能
  tableNameTest() {
    document.onkeydown = (e) => {
      if (e.code == "Enter") {
        e.preventDefault();
        this.addBtn();
        console.log(1);
      }
      let reg = /^\d{0,4}$/;
      if (reg.test(this.tableNum.value)) {
        this.add.disabled = false;
      } else {
        this.add.disabled = true;
      }
    };
  }
}

// 搜索功能
class search extends tools {
  constructor() {
    super();
    this.searchIput = this.$("#search");
    this.tbody = this.$('#tbody')
    this.onSearch();
  }

  // 搜索键盘事件
  onSearch() {
    this.searchIput.oninput = () => {
      let searchTxt = this.searchIput.value;
      let trs = this.tbody.children
      console.log(trs);

      for (let i = 0; i < newData.length; i++) {
        for(let k in newData[i]){

          if(this.searchIput.value == newData[i][k]){
            for(let j = 0; j < newData.length; j++){
              trs[j].style.backgroundColor = ''
            }
            trs[i].style.backgroundColor = 'red'
          }
        }
      }
    }
  }
}

let t = new table(newData);

new addTable();

new search();
